<template>
  <div class="pr-dictionaries">
    <div class="pr-dictionaries-head">
      <el-input v-model="keyWord" placeholder="名称" clearable @change="query" />
      <el-button @click="query">查询</el-button>
    </div>
    <div>
      <el-table :data="tableData" border fit stripe>
        <el-table-column v-for="item in tableHead" :key="item.id" :label="item.label" :prop="item.title" align="center"
          :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{ scope.row[item.title] }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button v-has size="mini" @click="addVisibleShow(scope.row)" type="infor">添加联动</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="paging.current" :page-sizes="paging.sizes" :page-size="paging.size" layout="total, sizes, prev, pager, next, jumper"
        :total="paging.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <!-- 添加联动弹框 -->
    <el-dialog title="添加联动" :visible.sync="addVisible" :close-on-click-modal="false" width="50%">
      <add-dialog v-if="addVisible" :row="row" @chang="addVisibleHide" />
    </el-dialog>

  </div>
</template>

<script>
  import addDialog from './components/addlinkage.vue'
  export default {
    components: {
      addDialog,
    },
    data() {
      return {
        row: {},

        addVisible: false, // 添加联动弹框显示隐藏

        tableHead: [{
            id: 1,
            label: '一级字典名称',
            title: 'name'
          },
          {
            id: 2,
            label: '二级字典名称',
            title: 'subName'
          },
          {
            id: 3,
            label: '字典编码',
            title: 'code'
          },
          {
            id: 4,
            label: '详情',
            title: 'detail'
          }
        ],
        tableData: [],



        keyWord: '',
        paging: {
          size: 10,
          sizes: [10, 30, 50, 100],
          total: 0,
          current: 1 // 分页默认开始显示页数
        },
      }
    },
    created() {
      // 获取字典列表
      this.getDicPageList()
    },
    methods: {
      // 分页参数改变
      handleSizeChange(val) {
        if (this.paging.size !== val) {
          this.paging.size = val;
          this.getDicPageList();
        }
      },
      handleCurrentChange(val) {
        if (this.paging.current !== val) {
          this.paging.current = val;
          this.getDicPageList();
        }
      },

      // 重新查询
      query: function() {
        this.paging.current = 1;
        this.getDicPageList();
      },

      // 获取字典列表
      getDicPageList: function() {
        let params = {
          current: this.paging.current,
          size: this.paging.size,
          name: this.keyWord,
          status: 2,
        };
        this.$server.getDicPageList(params).then(res => {
          this.tableData = res.data.list;
          // 设置分页
          let paging = {
            sizes: [10, 30, 50, 100],
            current: res.data.currPage,
            size: res.data.pageSize,
            total: res.data.totalCount,
          }
          this.paging = paging;
        });
      },

      // 添加联动
      addVisibleShow: function(row) {
        this.row = row;
        this.addVisible = true;
      },
      addVisibleHide: function(row) {
        this.row = row;
        this.addVisible = false;
      },

    }
  }
</script>
<style lang="scss" scope>
  .pr-dictionaries {
    &-head {
      display: flex;
      padding: 20px;

      >div {
        margin-right: 20px;
      }

      .el-cascader {
        width: 200px;
      }

      .el-input {
        width: 200px;
      }
    }
  }

  .pr-dialog-assignRoles {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .el-pagination {
    margin-top: 20px;
  }
</style>
